<template>
	<button :open-type="dataItem.type || 'default'" class="nav-tiem bg-w flex flex-align-center flex-space-between" @click="goPage(dataItem?.path)">
		<view class="flex flex-align-center">
			<image 
				:style="{ width: dataItem.w + 'rpx', height: dataItem.h + 'rpx' }"
				:src="dataItem.icon" mode=""
				style="margin-right: 20rpx;"
				v-if="dataItem.icon"
			></image>
			<text class="font32 color-b3 f-b">{{ dataItem.label }}</text>
			<slot name="left"></slot>
		</view>
		<view class="flex flex-align-center">
			<slot name="right"></slot>
			<image 
			v-if="dataItem.path && !dataItem.customArrow"
			style="width: 16rpx;height: 24rpx; margin-left: 10rpx;" 
			  src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/arrow_r.png" mode=""></image>
		</view>
		<view class="border" v-if="dataItem.border"></view>
	</button>
</template>

<script setup lang="ts">
	
	const emits = defineEmits(['click']);
	
	const props = defineProps({
		dataItem: {
			type: Object,
			default: {}
		}
	})
	
	function goPage (path: string) {
		if (!path) {
			return emits('click', props.dataItem);
		};
		uni.navigateTo({url: path});
	}
</script>

<style lang="scss" scoped>
	button::after{
		border: none;
	}
	.nav-tiem {
		height: 104rpx;
		padding: 0rpx 30rpx;
		border-radius: 32rpx;
		position: relative;
		.border {
			position: absolute;
			left: 30rpx;
			right: 0;
			bottom: 0;
			height: 2rpx;
			background-color: #E5E5E5;
		}
	}
</style>
